<template>
  <div class="selecter-wraper">
      <div v-for="(item,index) in selecterControlerList" :key="index" @click="selecterClick(index)" class="selecter-button" :class="{active:currentIndex===index}">
        <div class="selecter-name">
          <span>{{item}}</span>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    selecterControlerList:{
      type:Array,
      default(){
        return ['1','2']
      }
    }
  },
  data() {
    return {
      currentIndex:0,
    };
  },
  watch: {},
  computed: {},
  methods: {
    selecterClick(index){
      this.currentIndex = index;
      this.$emit('selectCotrolerClick',index);
    }
  },
  created() {},
  mounted() {}
};
</script>
<style scoped>
.selecter-wraper{
  display:flex;
  align-items:center;
  background-color:#fff;
  display: flex;
  justify-content: space-around;
  position:sticky;
  top:44px;
  
}
.selecter-name{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}
.selecter-name span{
  height: 22px;
  padding:0 5px;
}
.active .selecter-name span{
  border-bottom: 1px solid;
  color:#ff9f1a;
}
</style>